<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="header">
    <div class="left">创新创业一生一项目</div>
    <div class="right">
      <el-dropdown>
        <img src="https://picsum.photos/100" alt="" type="primary" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="percenter">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <p>您好，{{ identity.user }}</p>
    </div>
  </div>
</template>

<script setup>
// 使用 defineProps 来接收传入的 props
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const props = defineProps({
  identity: {
    type: String, // 指定 prop 的类型为字符串
    required: true // 表示该 prop 是必传的
  }
})
const router = useRouter()
const logout = async () => {
  await ElMessageBox.confirm('确认退出登录吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
  userStore.removeToken()
  router.push('/login')
}
// console.log('Received identity:', props.identity) // 用于调试

const emit = defineEmits(['get-percenter'])
const percenter = () => {
  router.push(props.identity.url)
  emit('get-percenter', 'PersonalCenter')
}
</script>

<style lang="less" scoped>
.header {
  height: 110px;
  background-color: #196adc;
  padding: 0 30px;
  text-align: center;
  line-height: 110px;
  display: flex;
  justify-content: space-between;
  .left {
    width: 670px;
    color: white;
    font-size: 30px;
  }
  .right {
    color: #fff;
    display: flex;
    img {
      width: 40px;
      height: 40px;
      margin-top: 30px;
      margin-right: 20px;
      border-radius: 50%;
    }
  }
}
</style>
